<template>
	<list-layout class="system-menu-list-wrap margin25">
		<Button slot="top-right" type="primary" @click="showCreate" style="margin-bottom: 5px">添加菜单</Button>

		<Table slot="table" row-key="id" :columns="columns" :data="list" stripe>
			<template slot="remark" slot-scope="{row}">{{row.remark || '-'}}</template>
			<template slot="action" slot-scope="{row}">
				<Button type="warning" size="small" ghost @click="showEdit(row.id)">编辑</Button>
				<Button type="error" size="small" @click="deleteHandler([{id: row.id}])">删除</Button>
				<Button v-if="row.parentId === '0'" type="primary" size="small" @click="showCreate({parentId: row.id, name: row.name})">添加下级</Button>
			</template>
		</Table>

		<edit :ref="createDialogRef"/>
	</list-layout>
</template>

<script>
import JBoot, {Utils} from 'jboot-env';

const columns = Object.freeze([
	{title: '菜单名称', key: 'name', tree: true},
	{title: '菜单编码', key: 'code'},
	{title: '备注信息', slot: 'remark'},
	{title: '创建时间', render: (h, {row}) => h('span', Utils.formatDate(row.createTime))},
	{title: '操作', slot: 'action', width: 220}
]);

export default JBoot.list({
	components: {
		edit: require('./edit').default
	},

	data (){
		return {
			moduleName: 'menu',
			columns
		}
	},

	methods: {
		setResponseData(_responseInfo) {
			this.$set(this, 'list', this.defaultOpenHandler(_responseInfo));
		},

		defaultOpenHandler (dataSource){
			return Utils.blank2Default(dataSource, []).map(item => {
				let {children} = item;

				if(Utils.isNotEmpty(children)){
					item._showChildren = true;

					item.children = this.defaultOpenHandler(children);
				}

				return item;
			});
		}
	}
});
</script>

<style lang="scss">
.system-menu-list-wrap {
}
</style>
